<template>
  <div class="demo">
    <el-card>
      api: <el-input v-model="apiurl" style="width: 400px;"></el-input>
    </el-card>

    <el-card style="margin-top: 10px;">
      <template #header>
        窗口模式
      </template>
      <el-button type="primary" @click="showBuilder = true">打开</el-button>
      <DialogConditionBuilder 
        v-model="showBuilder" 
        :default="defaultBuilderData" 
        :api="apiurl" 
        @result="onDialogBuilderResult" 
      />
      <div style="margin-top: 20px;">校验结果：{{ dialogResult?.valid }}</div>
      <div style="margin-top: 20px;">输出JSON：{{ dialogResult?.data }}</div>
    </el-card>

    <el-card style="margin-top: 10px;">
      <template #header>
        页面模式
      </template>
      <PageConditionBuilder 
        :default="defaultBuilderData" 
        :api="apiurl" 
        @result="onPageBuilderChange" 
      />
      <div style="margin-top: 20px;">校验结果：{{ pageResult?.valid }}</div>
      <div style="margin-top: 20px;">输出JSON：{{ pageResult?.data }}</div>
    </el-card>
  </div>
</template>

<script>
import DialogConditionBuilder from '@/components/ConditionBuilder/DialogConditionBuilder.vue'
import PageConditionBuilder from '@/components/ConditionBuilder/PageConditionBuilder.vue'

export default {
  name: 'Demo',
  components: {
    DialogConditionBuilder,
    PageConditionBuilder
  },
  data() {
    return {
      showBuilder: false,
      defaultBuilderData: {
        id: 1739609454916,
        combinator: "and",
        children: [
          {
            id: "67adb53b744ded4ebc54b262",
            field: "select",
            operator: "one_of",
            value: ["pump"]
          },
          {
            id: "67add05cc9be0d66ab123163",
            field: "number",
            operator: "between",
            value: [1, 3]
          }
        ]
      },
      fields: [],
      apiurl: 'https://z.bajie.io/dex/api/get_field?type=tugou',

      dialogResult: null,
      pageResult: null
    }
  },

  mounted() {
    this.fetchFields()
  },

  methods: {
    fetchFields() {
      fetch(this.apiurl)
        .then(response => response.json())
        .then(res => {
          if (res.code === 200) {
            this.fields = res.data.rows
          } else {
            console.log(res.message)
          }
        })
    },

    onDialogBuilderResult(result) {
      console.log(result)
      this.dialogResult = result
      if (result.valid) {
        this.showBuilder = false
      }
    },

    onPageBuilderChange(result) {
      console.log(result)
      this.pageResult = result
      this.defaultBuilderData = result.data
    }
  }
}
</script>

<style lang="scss" scoped>
  .demo {
    margin: 0;
    color: #666;
  }
</style>